<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 300px;
            height: 200px;
            background-color: blue;
            float:left;
        }
        .right{
            height:600px;
            background:red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 开启了bfc之后，为了避免内部的文字和左边的浮动元素有影响，所以就会出现现在你看到的效果 -->
    <div class="outer">
        <div class="left"></div>
        <div class="right">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora at dolores quisquam repellat aperiam, id ratione amet numquam dolorum error voluptate assumenda consectetur, vitae nihil iusto! Reiciendis veniam aut aperiam? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore veniam necessitatibus, deserunt distinctio officia facere? Praesentium dicta ad, aliquam distinctio eum, sapiente repellendus quidem et facilis corrupti molestias quas iusto? Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda laborum illum sed nam eligendi at id praesentium natus dolore perferendis, aut eos voluptatem ut ipsum dolores fugiat non delectus repudiandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quod, ad optio, doloribus ullam illum magnam voluptatum laudantium aspernatur fugit labore, consequuntur qui nisi esse eum repellendus. Distinctio, non officia! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores, neque! Ipsa dolore necessitatibus blanditiis iste tempora quod dolorum nobis corporis id amet, eaque vero sit aliquid in culpa recusandae enim? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, assumenda. Adipisci eaque et, error quaerat rem maiores, itaque iure quod at ea, vel eveniet. Magnam dolorum nam fugiat doloremque necessitatibus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, ducimus. Pariatur, reiciendis. Dignissimos expedita nam excepturi dicta voluptatum, eum molestias saepe soluta asperiores. Modi, doloremque eos omnis cum sed iusto. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat doloremque obcaecati temporibus mollitia odit similique, impedit aliquam nihil, eos magnam aperiam, animi ea illum adipisci repellat esse aut! Eveniet, nobis!</div>
    </div>
</body>
</html>